Animiertes responsives Dropdown Menu mit nPage Script
Allgemeine Beschreibung
Diese Seite verwendet das gleiche animierte responsive Dropdown Menü wird diese Seite. Allerdings wird hier die Navigation automatisch mit nPage Script erstellt.
Außerdem habe ich einige kleinere Änderungen am CSS-Code der Navigationleiste vorgenommen, damit ein paar mehr menüpunkte auf die Seite passen.
Durchzuführende /durchgeführte Test mit verschiedenen Browsern und Geräten
Desktop-Browser
-
Firefox 29 - vollständig funktionsfähig
-
Google Chrome 35 - vollständig funktionsfähig
-
Internet Explorer 11 - vollständig funktionsfähig
-
Internet Explorer 10 - vollständig funktionsfähig
-
Internet Explorer 9 - funktionsfähig, keine transition-Übergänge
-
Internet Explorer 8- funktionsfähig, keine transition-Übergänge, keine Anpassung an geringere Bildschirmbreite
Mobile Geräte und Emulationen
Diese Tests dienen in erster Linie dem responsiven Verhalten
-
Entwicklertools Desktop Firefox: 320x480, 480x320, 360x640, 640x360, 480x800, 600x800, 768x1024, 1024x768 - alle ok, 800x480, 800x600 - zu breit
-
Firefox Webdevoloper Toolbar - mit Querformat für kleine Tablets (800x600) und Tablethochformat (768x1024) zu breit, sonst ok
-
Genymotion - Samsung Galaxy S3 - 4.3 - API 18 - 720x1280, 240 dpi; useragent:Mozilla/5.0 (Android; Tablet; rv:40.0) Gecko/40.0 Firefox/40.0; width:480; height:853 - Google Adsense Werbung ist zu breit
-
Genymotion - Samsung Galaxy S3 - 4.3 - API 18 - 720x1280, 240 dpi; Android Browser 4.0 - Google Adsense Werbung ist normal
nPage Script
Es wird im Wesentlichen der gleiche nPage Script Code wie auf dieser Seite verwendet. Der einzige wesentliche Unterschied besteht darin, dass ich die Anzahl der auszugebenden Hauptmenüpunkte aus Platzgründen begrenzt habe.
Zusammenfassung der Merkmale
Drop Down,
Vertikal,
Flyout, Horizontal,
Tabbed, Responsive, jQuery, Accordion,
nur CSS,
CSS3, CSSMenumaker,
CSSDeck